<template>
  <div class="search-top">
    <div class="left" @click="router.back()"><svg t="1649930147277" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="6090" width="16" height="16">
        <path
          d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"
          fill="" p-id="6091"></path>
      </svg>
    </div>
    <input type="text" class="input" :placeholder="$t('search.input')" v-model="searchword"
      @keyup.enter="handleToSearch(searchword)" @input="handleToSearch(searchword)">
    <span @click="hanldeToClose" v-show="searchword" class="close"><svg t="1650200402100" class="icon"
        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2787" width="16" height="16">
        <path
          d="M503.466667 533.333333L384 413.866667l29.866667-29.866667 119.466666 119.466667L652.8 384l29.866667 29.866667-119.466667 119.466666 119.466667 119.466667-29.866667 29.866667-119.466667-119.466667L413.866667 682.666667l-29.866667-29.866667 119.466667-119.466667z m29.866666 362.666667C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z"
          fill="#444444" p-id="2788"></path>
      </svg></span>
  </div>
  <!-- 搜索类型一 -->
  <div class="searchType" v-if="searchType == 1">
    <div class="history">
      <div class="history-top">
        <span>{{ $t('search.history') }}</span>
        <svg @click="clearwordlist" t="1650182241934" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="2771" width="16" height="16">
          <path
            d="M779.3 228.2h-113v-35.4c0-34.9-28.4-63.3-63.3-63.3H425c-34.9 0-63.3 28.4-63.3 63.3v35.4h-113c-32.9 0-59.7 26.8-59.7 59.7v38.5c0 32.9 26.8 59.7 59.7 59.7h1.8v412.8c0 54.1 44 98.1 98.1 98.1h330.9c54.1 0 98.1-44 98.1-98.1V386.1h1.8c32.9 0 59.7-26.8 59.7-59.7v-38.5c-0.1-32.9-26.8-59.7-59.8-59.7z m-374.9-35.4c0-11.4 9.2-20.6 20.6-20.6h178c11.4 0 20.6 9.2 20.6 20.6v35.4H404.4v-35.4z m330.4 606c0 30.5-24.8 55.4-55.4 55.4H348.5c-30.5 0-55.4-24.8-55.4-55.4V386.1h441.7v412.7z m61.5-472.4c0 9.4-7.6 17-17 17H248.7c-9.4 0-17-7.6-17-17v-38.5c0-9.4 7.6-17 17-17h530.7c9.4 0 17 7.6 17 17v38.5z"
            p-id="2772"></path>
          <path d="M377.9 462.3h42.7v317.5h-42.7zM492.6 462.3h42.7v317.5h-42.7zM607.4 462.3h42.7v317.5h-42.7z"
            p-id="2773"></path>
        </svg>
      </div>
      <div class="history-content">
        <span v-for="(item, index ) in searchwordlist" :key="index" @click="handleToSearch(item)">{{ item }} </span>
      </div>
    </div>
    <div class="hot-search">
      <div class="hot-top">
        <span class="title">{{ $t('search.hotlist') }}</span>
      </div>
    </div>
    <div class="hot-list">
      <div class="hot-list-item" v-for="(item, index) in searchhotlist " @click="handleToSearch(item.searchWord)">
        <div class=" index">{{ ++index }}</div>
        <div class="info">
          <div class="title">{{ item.searchWord }}</div>
          <div class="description">{{ item.content }}</div>
        </div>
        <div class="number">{{ item.score }}</div>
      </div>
    </div>
  </div>
  <!-- 搜索类型一 -->
  <div class="searchType" v-if="searchType == 2">
    <div class="searchlist">
      <!-- <div class="item" v-for="item in searchSonglist" :key="item.id" @click="store.change(item.id, item, index)"> -->
      <div class="item" v-for="(item, index) in searchSonglist" :key="item.id"
        @click="searchStore.asyncsongDetail(item.id, item, index)">
        <div class="info">
          <div class="title">{{ item.name }}</div>
          <div class="jieshao">{{ item.artists[0].name }}--{{ item.album.name }}</div>
        </div>
        <div class="video" v-if="item.mvid" @click.stop="gotoMv(item.mvid)"><svg t="1650194558030" class="icon"
            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2584" width="16" height="16">
            <path
              d="M675.328 117.717333A425.429333 425.429333 0 0 0 512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667c0-56.746667-11.093333-112-32.384-163.328a21.333333 21.333333 0 0 0-39.402667 16.341333A382.762667 382.762667 0 0 1 896 512c0 212.074667-171.925333 384-384 384S128 724.074667 128 512 299.925333 128 512 128c51.114667 0 100.8 9.984 146.986667 29.12a21.333333 21.333333 0 0 0 16.341333-39.402667zM456.704 305.92C432.704 289.152 405.333333 303.082667 405.333333 331.797333v360.533334c0 28.586667 27.541333 42.538667 51.370667 25.856l252.352-176.768c21.76-15.253333 21.632-43.541333 0-58.709334l-252.373333-176.768z m-8.597333 366.72V351.466667l229.269333 160.597333-229.269333 160.597333z"
              fill="#3D3D3D" p-id="2585"></path>
          </svg></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { search } from '@/store/search.js'
import { useRouter, } from 'vue-router'
import { storeToRefs } from 'pinia'
// 引入防抖
import debounce from 'lodash/debounce.js'
import { musicplaycontrolStore } from "../store/playcontrol";
let searchword = ref('')
let router = useRouter()
const searchStore = search()
searchStore.asyncRequestSerachHot()
// 搜索显示切换
let searchType = ref(1)
//获取热搜歌单详情
const { searchhotlist, searchSonglist } = storeToRefs(searchStore)
let searchwordlist = ref([])
//回车搜索,加入防抖
const handleToSearch = debounce((searchWord) => {
  // 添加搜索关键字
  searchword.value = searchWord
  searchwordlist.value.unshift(searchWord)
  //去重
  searchwordlist.value = [...new Set(searchwordlist.value)]
  if (searchwordlist.value.length > 10)
    searchwordlist.value.length = 10
  // 存入本地
  localStorage.setItem('searchwordlist', searchwordlist.value)
  //调用搜索
  searchStore.asyncrequestSerachWord(searchWord)
  //设置搜索type为2,显示搜索结果
  searchType.value = 2
  // console.log('输入总');
}, 500)
let hanldeToClose = () => {
  searchType.value = 1
  searchword.value = ''
}
// 搜索数据
// let getSearchlis=(searchWord)=>{
//    searchStore.asyncrequestSerachWord()
// }
//取搜索数据
let str = localStorage.getItem('searchwordlist')
if (str) searchwordlist.value = str.split(',')
//垃圾桶删除
let clearwordlist = () => {
  localStorage.removeItem('searchwordlist')
  searchwordlist.value = []
}
let gotoMv = (id) => {
  musicplaycontrolStore().$patch({
    pause: true
  })
  router.push(
    {
      name: 'mv',
      params: { mvid: id }
    }
  )
}

</script>

<style scoped lang="less">
.search-top {
  margin-top: 0.3rem;
  display: flex;
  height: 1rem;
  // background-color: red;
  justify-content: space-between;
  align-items: center;



  .input {
    flex: 1;
    line-height: 0.6rem;
    font-size: 0.3rem;
    margin: 0 0.2rem;
    // border: 1px solid #ccc;
    border: none;
    outline: none;
    border-radius: 0.2rem;
    padding: 0.01rem 0.66rem;
    background-color: rgba(204, 204, 204, 0.4);
    position: relative;
  }

  .close {
    position: absolute;
    right: 0.3rem;
  }

  .left {
    margin-left: 0.3rem;

  }
}

.history {
  .history-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.3rem 0.3rem;
    font-size: 0.33rem;
  }



  .history-content {
    // height: 2rem;
    // background-color: red;
    margin: 0.3rem 0.3rem;
    padding: 0.1rem 0.3rem;
    overflow: scroll;


    span {
      display: inline-block;
      background-color: #f7f7f7;
      margin: 0.11rem 0.1rem;
      padding: 0.1rem 0.1rem;
      border-radius: 5px;

    }
  }
}

.hot-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.3rem 0.3rem;
  font-size: 0.33rem;

  .hot-top {
    .title {
      font-size: 0.38rem;
    }

  }
}

.hot-list {

  height: 9rem;
  overflow: scroll;

  .hot-list-item {
    // background-color: red;
    display: flex;
    // justify-content: space-around;
    align-items: center;
    margin-bottom: 0.2rem;
    // border-bottom: 1px solid #ccc;
    padding-bottom: 0.1rem;

    .index {
      color: #fb2222;
      margin: 0 0.3rem;
      margin-right: 0.5rem;
      // background-color: yellow;
      font-size: 0.36rem;
    }

    .info {
      .title {
        font-size: 0.36rem;
      }

      width: 6.2rem;
      // background-color: red;

      .description {
        margin-top: 0.03rem;
        font-size: 0.26rem;
        color: gray;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }

    .number {
      margin-right: 0.3rem;
      color: gray;
    }
  }
}

.searchType {
  .searchlist {
    margin: 0.3rem 0.3rem;
    height: 10rem;
    overflow: scroll;

    .item {
      display: flex;
      justify-content: space-between;
      // background-color: red;
      align-items: center;
      line-height: 0.4rem;
      padding: 0.2rem 0;
      border-bottom: 0.3px solid #ccc;

      .title {
        color: rgb(55, 143, 237);
        font-size: 0.38rem;
      }

      .jieshao {
        color: grey;
        margin-top: 0.1rem;
      }

      .video {

        font-size: 0.43rem;
      }
    }

  }
}
</style>
 